<!--
 * @Description: 测试文件
 * @Author: 薛飞
 * @Date: 2022-03-14 09:31:58
 * @LastEditTime: 2022-04-13 22:51:08
 * @LastEditors: flyer
-->
<template>
  <div class="main">
    <el-button @click="back">跳回去</el-button>
    <div class="user-name">{{ userInfo.userName }}</div>
    <div class="pwd">{{ test(userInfo.pwd) }}</div>
    <div>{{ count }} {{ testComputed }}</div>
    <div
      id="luckysheet"
      style="width: 100%; height: 100%; position: relative"
    ></div>
  </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, computed, watch } from "vue";
import { useStore } from "vuex";
import router from "@/router";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
declare const luckysheet: any;
export default {
  name: "AboutView",
  props: {
    msg: String,
  },
  setup() {
    /**
     * @description: 测试ts方法
     * @author: 薛飞
     */
    const test = (num: number): Array<number> => {
      return [num];
    };
    /**
     * @description: 返回
     * @author: 薛飞
     */
    const back = () => {
      router.back();
    };
    const $store = useStore();
    // eslint-disable-next-line no-debugger
    let userInfo = $store.state.user; //获取state属性值
    const data = reactive({
      count: 0,
      userInfo: { userName: "ppp", pwd: "qqq" },
    });

    onMounted(() => {
      data.count++;
      data.userInfo = userInfo;
      //配置项
      var options = {
        container: "luckysheet", //luckysheet为容器id
      };
      luckysheet.create(options);
    });
    const testComputed = computed(() => data.count + "computed");
    watch(
      () => data.count,
      (count, prevCount) => {
        console.log(count, prevCount);
      },
      { immediate: true, deep: true }
    );
    return {
      // userInfo,
      testComputed,
      back,
      test,
      ...toRefs(data),
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
$color: red;
.main {
  width: 100%;
  height: 100%;
  .user-name {
    color: $color;
  }
  .pwd {
    color: $color;
  }
}
</style>
